<template>
  <div class="com-nav">
    <div v-for="(item, index) of props.list" :key="index">{{item}}</div>
  </div>
</template>

<script setup lang="ts">
import {defineComponent} from "vue";

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})

defineComponent({name: 'ComNav'})
</script>

<style scoped lang="scss">
.com-nav {
  display: flex;
  margin-bottom: 10px;
  font-size: 14px;

  div {
    position: relative;
    margin-right: 22px;

    &::after {
      content: '';
      position: absolute;
      top: 48%;
      right: -14px;
      transform: translateY(-50%);
      display: inline-block;
      width: 6px;
      height: 10px;
      background: url('./assets/arrow.png') no-repeat center;
    }

    &:first-child {
      color: #FF4350;
    }

    &:last-child {
      margin-right: 0;

      &:after {
        display: none;
      }
    }
  }
}
</style>
